import { InboxOutlined } from "@ant-design/icons";
import {
  ProFormUploadButton,
  ProFormUploadDragger,
} from "@ant-design/pro-components";
import {
  ProForm,
  ProFormText,
  ProFormTextArea,
} from "@ant-design/pro-components";
import { message } from "antd";

import React from "react";

const UploadPage: React.FC = () => {
  const handleSubmit = async (values: any) => {
    console.log("上传表单数据:", values);
    message.success("提交成功！");
  };

  return (
    <div style={{ padding: 24 }}>
      <h1>文件上传</h1>
      <ProForm
        onFinish={handleSubmit}
        layout="vertical"
        style={{ maxWidth: 600 }}
      >
        <ProFormText
          name="title"
          label="文件标题"
          placeholder="请输入文件标题"
          rules={[{ required: true, message: "请输入文件标题" }]}
        />

        <ProFormUploadButton
          name="files"
          label="选择文件"
          max={5}
          fieldProps={{
            name: "file",
            multiple: true,
          }}
          action="/upload.do"
          extra="支持多个文件上传，最多5个文件"
        />

        <ProFormUploadDragger
          name="dragger"
          label="拖拽上传"
          max={1}
          fieldProps={{
            name: "file",
            multiple: false,
          }}
          action="/upload.do"
          icon={<InboxOutlined />}
          extra="支持拖拽上传，点击或拖拽文件到此区域上传"
        />

        <ProFormTextArea
          name="description"
          label="文件描述"
          placeholder="请输入文件描述"
          rows={4}
        />
      </ProForm>
    </div>
  );
};

export default UploadPage;
